<template>
<!--  <el-dialog-->
<!--    title="规则组案例"-->
<!--    v-loading="loading"-->
<!--    width="60%"-->
<!--    :close-on-click-modal="false"-->
<!--    :visible.sync="visible">-->
  <div class="fillcontain" >

    <div class="head-title"> <i class="el-icon-edit-outline">规则组案例</i></div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"
             class="form-container">

      <el-row>
        <el-col :span="12">
          <el-form-item label="案例编码" label-width="120px" prop="templateCode">
            <el-input v-model="dataForm.templateCode" disabled placeholder="案例编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案例名称" label-width="120px" prop="templateName">
            <el-input v-model="dataForm.templateName"  placeholder="案例名称"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属规则组" label-width="120px" prop="groupIdentify">
            <el-select v-model="dataForm.groupIdentify" filterable placeholder="请选择">
              <el-option
                v-for="item in groups"
                :key="item.groupIdentify"
                :label="item.groupName"
                :value="item.groupIdentify"
                @click.native="changeGroup(item)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否有效" label-width="120px" prop="isEffect">
            <el-switch
              v-model="dataForm.isEffect"
              active-color="#13ce66"
              inactive-color="#ff4949"
              on-value="1" on-text="是" off-text="否" off-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" label-width="120px" >
        <el-input type="textarea" :rows="3" v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>

    </el-form>

    <div class="mb20 pl20">
      <el-row  >
        <el-col :span="24" v-for="(reqTree,index) in dataList">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{reqTree.entityInfo.entityName}}</span>
            </div>
            <div class="temp_content">
              <el-tree
                :data="reqTree.messageList"
                node-key="id"
                :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ data.itemName }}--{{data.itemIdentify}}</span>
                  <span v-if="data.itemType==='List'">
                      <el-button type="text" v-if="data.isAdd !='1'" size="mini" @click="() => append(node,data,index)"> 添加 </el-button>
                      <el-button type="text" v-if="data.isAdd==='1'" size="mini" @click="() => remove(node,data,index)"> 删除 </el-button>
                  </span>
                  <span v-else>
                      <el-input v-model="data.itemValue" :placeholder="data.itemName" ></el-input>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="content-footer">
      <el-button type="info" plain @click="dataFormSubmit()">确定</el-button>
      <el-button @click="toList">取消</el-button>
    </div>
  </div>
<!--  </el-dialog>-->
</template>

<script>
    import { getGroupMsgVos, saveData,getData } from '@/api/testCase/groupCase'
    import {listGroupData} from '@/api/ruleConfig/groupInfo'
    import constant from "../../../../../api/constant";

export default {
    data () {
      return {

        loading: false,
        isEdit: false,
        groups: [],
        dataList: [],
        visible: false,
        dataForm: {
            id: null,
            groupIdentify: '',
            groupName: '',
            templateName: '',
            templateCode: '',
            reqContent: '',
            resContent: '',
            remark: '',
            isEffect: '1',
            reqList: []
        },
          dataRule: {
              // templateCode: [
              //     {required: true, message: '案例编码不能为空', trigger: 'blur'}
              // ],
              templateName: [
                  {required: true, message: '案例名称不能为空', trigger: 'change'}
              ],
              groupIdentify: [
                  {required: true, message: '所属规则组不能为空', trigger: 'change'}
              ]

          }

      }
    },
    created () {
        let id = this.$route.params.id
        this.init(id)
    },
    methods: {
        toList(){
            constant.clearTag(this)
            this.$router.push({name: constant.routerName.listGroupCase})
        },
        append (node, data, index) {
            // console.log(index)
            let treeData = this.dataList[index]
            let newData = null
            treeData.allArrayList.forEach(item => {
                if (item.itemId === data.itemId) {
                    newData = JSON.parse(JSON.stringify(item))
                    treeData.reqIndex = treeData.reqIndex + 1
                    newData.id = treeData.reqIndex
                    newData.isAdd = '1' // 代表新增的
                }
            })
            if (treeData.entityId === data.entityId) {
                node.parent.data.push(newData)
            } else {
                node.parent.data.children.push(newData)
            }
        },
        remove (node, data, index) {
            let treeData = this.dataList[index]
            if (treeData.entityId === data.entityId) {
                const index = node.parent.data.findIndex(d => d.id === data.id)
                node.parent.data.splice(index, 1)
            } else {
                const index = node.parent.data.children.findIndex(d => d.id === data.id)
                node.parent.data.children.splice(index, 1)
            }
        },
        changeGroup (item) {
            this.dataForm.groupName = item.groupName
            let params = {
                groupIdentify: item.groupIdentify
            }
            getGroupMsgVos(params).then(res => {
                if (res.data.data && res.data.resultCode === 0) {
                    this.dataList = res.data.data
                    // console.log(this.dataList)
                }
            })
        },
        // 获取规则组信息
        async listGroupData () {
            let params = {}
            let groups = []
            await listGroupData(params).then(res => {
                groups = res.data.data
            })
            return groups
        },
        async init (id) {
            this.visible = true
            this.isEdit = false
            this.dataList = []
            this.$store.dispatch('loading/CHANGE_LOADING', true)

            this.groups = await this.listGroupData()
            this.$nextTick(() => {

                this.$refs['dataForm'].resetFields()
                if (id  && id != "undefined") {
                    this.dataForm.id = id
                    this.isEdit = true
                    let params = {
                        id: this.dataForm.id + ''
                    }
                    getData(params).then(res => {
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                        if (res.data.data && res.data.resultCode === 0) {
                            this.dataForm = res.data.data;
                            this.dataList = res.data.data.reqList
                        }
                    }).catch(err=>{
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                    })
                }else{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                }
            })
        },

        // 表单提交
        dataFormSubmit () {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.dataForm.reqList = this.dataList
                    this.$store.dispatch('loading/CHANGE_LOADING', true)
                    saveData(JSON.stringify(this.dataForm)).then(res => {
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                        if (res.data && res.data.resultCode === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false
                                    this.dataForm = {
                                        id: null,
                                        sceneIdentify: null,
                                        sceneName: '',
                                        messageName: '',
                                        reqContent: '',
                                        resContent: '',
                                        remark: '',
                                        isEffect: '1',
                                        resultList: []
                                    }
                                    // this.$emit('refreshDataList')
                                    this.toList()
                                }
                            })
                        } else {
                            this.$message.error(res.data.resultMsg)
                        }
                    }).catch(err=>{
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                    })
                }
            })

        }
    }
}
</script>

<style lang="scss">
  .title{
    padding: 10px;
    background-color: rgba(248, 248, 248, 1);
    margin-bottom: 10px;
  }
  .el-table__row .el-form-item__content{
    margin-left: 0 !important;
  }
  .el-table__row .el-form-item{
    margin-bottom: 0 !important;
  }
  .el-tree-node{
    padding:10px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
